<template>
    <div class="detals">
        <div class="message-box" style="margin-top: -20px">
            <el-header class="title" style="position: relative;top: 30px;left:-15px;font-size: 30px">
                <i class="el-icon-s-order">详细信息</i>
            </el-header>
            <el-divider></el-divider>
            <div class="message">
                <div class="grid-content bg-purple">日志类型：<br>{{logJob.parentType}}</div>
                <div class="grid-content bg-purple">详细类别：<br>{{logJob.typeName}}</div>
                <div class="grid-content bg-purple">归属人：<br>{{logJob.username}}</div>
                <div class="grid-content bg-purple">公开状态：<br>{{logJob.joblogStatus=='Y'?'已公开':'未公开'}}</div>
                <div class="grid-content bg-purple">案件：<br>{{logJob.caseNo}}</div>
                <div class="grid-content bg-purple">客户名称：<br>{{logJob.client}}</div>
                <div class="grid-content bg-purple">起始时间：<br>{{logJob.joblogStarttime+'至'+logJob.joblogEnddtime}}</div>
                <div class="grid-content bg-purple">提交时间：<br>{{logJob.joblogReportedtime}}</div>
                <div class="grid-content bg-purple">更新日期：<br>{{logJob.joblogUpdatetime}}</div>
                <div class="grid-content bg-purple">
                    相关附件：<br>
                    <a style="color: #5daf34" @click.stop="giveMessage" :href="url">下载附件</a>
                </div>
                <div class="grid-content bg-purple">备注：<br>{{logJob.joblogText}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['logJob'],
        data() {
            return {
                token:this.$store.state.token,
                url:''
            }
        },
        methods: {
            giveMessage(){
                if(this.logJob.joblogFile == null || this.logJob.joblogFile == ''){
                    this.$message.error({
                        message:'不存在该文件',
                        duration:1000
                    })
                }
            },
            setUrl(){
                if(this.logJob.joblogFile != null && this.logJob.joblogFile != ''){
                    this.url = 'http://localhost/download?url='+this.logJob.joblogFile+'&name=附件&token='+this.token
                }else{
                    this.url = 'http://localhost:8080/#/MyJoblog'
                }
            }
        },
        watch:{
            logJob:{
                handler(){
                    this.setUrl()
                }, deep:true
            }
        },
        created(){
            this.setUrl()
        }
    }
</script>

<style scoped>
    .detals {
        width: 100%;
    }

    .message-box {
        width: 100%;
    }

    .message {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-left: 8px;
    }

    .bg-purple {
        border: 1px solid gainsboro;
        width: 32%;
        padding-top: 15px;
        height: 70px;
        padding-left: 10px;
    }
</style>
